<template>
	<!-- 搜索 star -->
	<up-sticky>
		<up-row class="search" justify="space-between" gutter="10">
			<up-col span="9">
				<up-search :searchIconSize="33" :showAction="false" bgColor="#fff" borderColor="#eee"></up-search>
			</up-col>
			<!-- 专区下拉 -->
			<up-col span="3">
				<up-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
					<view class="popup">
						<h2 class="popup-title">选择分区</h2>
						<up-row class="center" justify="around">
							<up-col span="2" v-for="i in 4">
								<text class="popup-text">侧式{{ i }}</text>
							</up-col>
						</up-row>
					</view>
					<up-button class="popup-btn-choice" color="red" shape="circle" size="lage">确认选择</up-button>
				</up-popup>
				<a @click="show = true" style="color: #999;">专区商品<up-icon style="display: inline-block;"
						name="arrow-down"></up-icon></a>
			</up-col>
		</up-row>
	</up-sticky>
	<!-- 搜索 end -->

	<!-- banner star -->
	<view class="banner">
		<up-image :show-loading="true" :src="src" width="100%" height="170px"></up-image>
	</view>
	<!-- banner end -->

	<!--  分类 star -->
	<view class="classify">
		<up-cate-tab class="cate-tab" :tabList="tabList" tabKeyName="title" itemKeyName="title">
			<template #pageItem="{ pageItem }">
				<view class="w-full">
					<up-cell-group :border='false'>
						<up-cell :border='false'>
							<!-- 图片 -->
							<template #icon v-slot:title>
								<up-image :src="pageItem.cover" width="100px" height="100px"></up-image>
							</template>
							<!-- 标题内容 -->
							<template v-slot:title>
								<view>
									{{ pageItem.title }}
								</view>
							</template>
							<!-- 价格 -->
							<template v-slot:label>
								<view class="h-100 pt-1">
									<text class="text-md text-red">￥{{ pageItem.price }}</text>
								</view>
							</template>
						</up-cell>
					</up-cell-group>
				</view>
			</template>
		</up-cate-tab>
	</view>

	<!-- <view class="classify">
		<van-tabs v-model:active="active" style="background-color: red;" :show-header="false">
			<up-row>
				<up-col span="6">
					<van-sidebar v-model="active"
						style=" width: 120px; background-color: #f7f8fa; height: 60vh; text-align: center;">
						<van-sidebar-item v-for="i in 3" title="测试" style="" />
					</van-sidebar>
				</up-col>

				<up-col span="6">
					<van-tab title="标签 1">
						<view class="box" style="background-color: pink;">
							1
						</view>
					</van-tab>
					<van-tab title="标签 2">内容 2 <p>234</p></van-tab>
				</up-col>
			</up-row>
		</van-tabs> -->

	<!--  分类 end -->


	<!-- shoppingCar star -->
	<view class="shoppingCar">
		<up-row>
			<up-col span="9">
				<view class="ziti"><span style="color: #ccc;">自提:</span> 共计{{ 0 }}件 <span style="color: red;"><span
							style="font-size: small;">￥</span> {{ 0 }}</span></view>
				<view class="ziti"><span style="color: #ccc;">自提:</span> 共计{{ 0 }}件 <span style="color: red;"><span
							style="font-size: small;">￥</span> {{ 0 }}</span></view>
			</up-col>
			<up-col span="3">
				<up-button color="red" shape="circle" around="true">去购物车</up-button>
			</up-col>
		</up-row>
	</view>
	<!-- shoppingCar end-->

</template>

<script setup>
import { ref, onMounted } from 'vue';

const tabList = ref([
	{
		title: '选项一', children: [
			{ title: '水煮肉片', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88 }
		]
	},
	{
		title: '选项一', children: [
			{ title: '酸菜鱼', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 99 },
			{ title: '酸菜鱼', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 99 }
		]
	},
]);


// 搜索 star
const show = ref(false);
function open() {
	show.value = true;
}

function close() {
	show.value = false;
}
// 搜索 end

// banner star
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
// banner end

// 分类导航 star
const active = ref(0);
// 分类导航 end
</script>

<style scoped lang="scss">
@import "@/uni_modules/uview-plus/index.scss";

// 搜索 star
.search {
	padding: .625rem;
	background-color: #fff;

	.popup-btn-choice {
		margin: 1.25rem auto;
		width: 18.75rem;
		height: 3.125rem;
	}
}

// 下拉框
.popup {
	height: 15rem;

	.center {
		height: 100%;
		background-color: #fff;
	}

	.popup-text {
		padding: .625rem;
		border-radius: .3125rem;
		font-size: 1rem;
		background-color: #e3e3e3;
	}

	.popup-title {
		margin: .625rem auto;
		color: #333;
		text-align: center;
		font-weight: 500;
	}
}

// 搜索 end 


// shoppingCar star
.shoppingCar {
	padding: .75rem;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

// shoppingCar end


.cate-tab {
	height: calc(100vh - 150px);
	/* #ifdef H5 */
	height: calc(80vh - 150px - var(--window-top));
	/* #endif */
}
</style>
